<template>
  <view class="outbound-page">
    <view class="header">
      <table class="details-page-table">
        <tr>
          <td class="label-td">类型</td>
          <td>
            <text class="material">{{
              PRODUCT_TYPE[rowData.productType]
            }}</text>
          </td>
          <td class="label-td">编号</td>
          <td>{{ rowData.productCode }}</td>
          <td class="label-td">名称</td>
          <td>{{ rowData.productName }}</td>
        </tr>
        <tr>
          <td class="label-td">出库数量</td>
          <td>{{ rowData.holdQuantity }}</td>
          <td class="label-td">已出库</td>
          <td>{{ rowData.finishedQuantity }}</td>
        </tr>
      </table>
    </view>

    <view class="content" v-if="batchList.length > 0">
      <scroll-view
        scroll-y="true"
        class="scroll-view-style"
        @scrolltolower="loadMore"
      >
        <view v-for="(item, index) in batchList" :key="index" class="list-item">
          <view class="list-item-line">
            <view class="list-item-line-text">
              <text>产品编号：</text> <text>{{ item.productCode }}</text></view
            >
          </view>
          <view class="list-item-line">
            <view class="list-item-line-text">
              <text>容器编号：</text>
              <text>{{ item.containerCode }}</text></view
            >
          </view>
          <view class="list-item-line">
            <view class="list-item-line-text">
              <text>批次：</text> <text>{{ item.batch }}</text></view
            >
          </view>
          <view class="list-item-line">
            <view class="list-item-line-text">
              <text>位置：</text>
              <text>{{ item.posCode }}</text>
            </view>
          </view>
          <view class="list-item-line">
            <view class="list-item-line-text">
              <text>绑定单据：</text>
              <text>{{ item.bindOrder || "---" }}</text></view
            >
          </view>
          <view class="list-item-line">
            <view class="list-item-line-text">
              <text>数量：</text>
              <text>{{ item.inventoryQuantity }}</text></view
            >
          </view>
          <view class="list-item-line">
            <view class="list-item-line-text">
              <text>有效期：</text>
              <text>{{ timestampToDate(item.expireTime) }}</text></view
            >
          </view>
        </view>
        <view v-if="loading" class="loading">加载中...</view>
        <view v-if="noMoreData" class="no-more-data">暂无多数据了</view>
      </scroll-view>
    </view>
    <view class="content no-data" v-else> 暂无数据 </view>
    <view class="bottom-btn">
      <!--接受-- 取消和确认按钮 -->
      <view class="back-btn btn" @click="cancelPage">关闭</view>
      <view class="confirm-btn btn" @click="QRCodeFn">扫码容器</view>
    </view>

    <!-- 容器确认弹框 -->
    <uni-popup
      ref="popupContainer"
      type="center"
      :is-mask-click="false"
      border-radius="10px 10px 0 0"
    >
      <view class="popup-content">
        <view class="container-code">
          <text>扫码容器：</text>
          <text>{{ QRCodeContainer.containerCode || "---" }}</text></view
        >
        <!-- 取消和确认按钮 -->
        <view class="container-item">
          <view class="list-item-line">
            <view class="list-item-line-text">
              <text>产品编号：</text>
              <text>{{ QRCodeContainer.productCode }}</text></view
            >
          </view>

          <view class="list-item-line">
            <view class="list-item-line-text">
              <text>批次：</text> <text>{{ QRCodeContainer.batch }}</text></view
            >
          </view>
          <view class="list-item-line">
            <view class="list-item-line-text">
              <text>位置：</text>
              <text>{{ QRCodeContainer.posCode }}</text>
            </view>
          </view>
          <view class="list-item-line">
            <view class="list-item-line-text">
              <text>绑定单据：</text>
              <text>{{ QRCodeContainer.bindOrder || "---" }}</text></view
            >
          </view>
          <view class="list-item-line">
            <view class="list-item-line-text">
              <text>数量：</text>
              <text>{{ QRCodeContainer.inventoryQuantity }}</text></view
            >
          </view>
          <view class="list-item-line">
            <view class="list-item-line-text">
              <text>有效期：</text>
              <text>{{
                timestampToDate(QRCodeContainer.expireTime)
              }}</text></view
            >
          </view>
          <view class="list-item-line">
            <view class="list-item-line-text flex-1">
              <text>出库数量：</text>
              <input
                class="uni-input"
                type="number"
                v-model="outboundNumber"
                placeholder="请输入出库数量"
              />
            </view>
          </view>
        </view>

        <view class="container-btn">
          <view class="cancel-btn btn" @click="closeContainer">取消</view>
          <view class="confirm-btn btn" @click="confirmContainerFn">出库</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { getOutboundBatchListNumber, checkOutbound } from "@/service/outbound";
import { buildGetUrl, timestampToDate } from "@/common/utils";
import {
  STORAGE_KEY,
  RESPONSE_CODE,
  OUTBOUND_TYPE,
  PRODUCT_TYPE,
  ORDER_TEXT,
  OUTBOUND_ORDER_TEXT,
} from "@/common/constant";
export default {
  data() {
    return {
      outboundNumber: 0,
      PRODUCT_TYPE,
      RESPONSE_CODE,
      noMoreData: false,
      loading: false,
      timestampToDate,
      batchList: [],
      rowData: {},
      page: 1,
      queryParams: {},
      total: 0,
      QRCodeContainer: null,
    };
  },
  onLoad(options) {
    let objStr = decodeURIComponent(options.param);
    let obj = JSON.parse(objStr);
    this.rowData = obj.row;
    console.log("接收的参数", obj);
    this.queryParams = {
      pageSize: 20,
      warehouseId: obj.warehouseId,
      productId: obj.row.productId,
      batches: obj.batches,
      bindOrder: obj.bindOrder,
      bindOrderFlag: obj.bindOrderFlag,
    };
    if (this.queryParams.warehouseId && this.queryParams.productId) {
      this.getOutboundBatchList();
    }
  },

  methods: {
    // 出库
    confirmContainerFn() {
      if (this.outboundNumber <= 0) {
        uni.showToast({
          title: "请输入正确的出库数量",
          icon: "error",
          style: {
            width: "80%", // 设置宽度，使其能够容纳更多文字
          },
        });
        return;
      }
      const params = {
        charges: [
          {
            id: this.QRCodeContainer.id,
            quantity: this.outboundNumber,
            sourceDetailId: this.rowData.id,
            sourceId: this.rowData.parentId,
          },
        ],
        id: this.rowData.parentId,
      };
      console.log("params", params);
      checkOutbound(params).then((res) => {
        if (res.code === RESPONSE_CODE.SUCCESS) {
          uni.showToast({
            title: "出库成功",
            icon: "success",
          });
          this.$refs.popupContainer.close();
          this.rowData.holdQuantity -= Math.round(this.outboundNumber);
          this.rowData.finishedQuantity += Math.round(this.outboundNumber);
          this.resetAllAndLoadData();
        } else {
          uni.showToast({
            title: res.msg,
            icon: "error",
            style: {
              width: "80%", // 设置宽度，使其能够容纳更多文字
            },
          });
        }
      });
    },

    closeContainer() {
      this.QRCodeContainer = null;
      this.$refs.popupContainer.close();
    },
    // 扫码
    QRCodeFn() {
      uni.scanCode({
        // 扫码成功的回调函数
        success: (res) => {
          // console.log("扫描结果：", res.result);
          // WQ|86按|拆分
          if (!res.result.includes("|")) {
            uni.showToast({
              title: "请扫描正确容器",
              icon: "error",
            });
            return;
          }
          const arr = res.result.split("|");
          if (arr[0] !== "WQ") {
            uni.showToast({
              title: "请扫描正确容器",
              icon: "error",
            });
            return;
          }

          this.batchList.forEach((item) => {
            if (item.containerId == arr[1]) {
              this.QRCodeContainer = item;
            }
          });
          if (this.QRCodeContainer?.id) {
            // 未出库  = 应出库
            let unfinishedNumber = this.rowData.holdQuantity;
            // 当前容器数量
            let currentContainerNumber = this.QRCodeContainer.inventoryQuantity;
            this.outboundNumber =
              currentContainerNumber > unfinishedNumber
                ? unfinishedNumber
                : currentContainerNumber;
            this.$refs.popupContainer.open();
          } else {
            uni.showToast({
              title: "请扫描正确容器",
              icon: "error",
            });
          }
        },
        // 扫码失败的回调函数
        fail: (err) => {
          console.log("扫描失败：", err);
        },
      });
    },
    loadMore() {
      if (this.loading || this.noMoreData) return;
      this.loading = true;
      this.page++;
      // 这里可以调用接口获取更多数据
      if (this.batchList.length >= this.total) {
        // 假设只有三页数据
        this.noMoreData = true;
        this.loading = false;
        return;
      }
      this.getOutboundBatchList();
    },
    cancelPage() {
      uni.navigateBack({
        delta: 1,
      });
    },
    getOutboundBatchList() {
      this.queryParams.pageNum = this.page;
      getOutboundBatchListNumber(this.queryParams).then((res) => {
        if (res.code === RESPONSE_CODE.SUCCESS) {
          this.loading = false;
          this.total = res.data.total;
          this.batchList.push(...res.data.list);
          console.log(res.data);
        }
      });
    },

    // 重置
    resetAllAndLoadData() {
      this.page = 1;
      this.total = 0;
      this.loading = false;
      this.noMoreData = false;
      this.batchList = [];
      this.getOutboundBatchList();
    },
  },
};
</script>

<style lang="less" scoped>
.outbound-page {
  .flex-1 {
    display: flex;
  }
  .material {
    border: 1rpx solid #d9ecff;
    color: #409eff;
    background: #ecf5ff;
    padding: 0 10rpx;
    box-sizing: border-box;
    border-radius: 5rpx;
    font-size: 20rpx;
  }
  .header {
    background: #ecf5ff;
    padding: 10rpx;
    padding-bottom: 0rpx;
  }
  .details-page-table {
    width: 100%;
    // 边框合并
    border-collapse: collapse;
    font-size: 20rpx;
    color: #777;
    background: #fff;
    border-radius: 14rpx;
    tr,
    td {
      line-height: 40rpx;
      border: 1rpx solid #eee;
    }
    td:nth-child(odd) {
      text-align: center;
      background-color: #ebeef5;
    }
    td:nth-child(even) {
      padding-left: 10rpx;
    }
    .label-td {
      width: 100rpx;
    }
  }

  .content {
    height: calc(100vh - 180rpx);
    background: #ecf5ff;
    &.no-data {
      text-align: center;
      line-height: 200rpx;
      color: #999;
      font-size: 26rpx;
    }
    .scroll-view-style {
      height: 100%;
      padding: 10rpx;
      box-sizing: border-box;
    }
    .list-item {
      font-size: 12px;
      margin-bottom: 10rpx;
      background: #fff;
      border-radius: 14rpx;
      padding: 10rpx 20rpx;
      box-sizing: border-box;
      position: relative;
      .confirm-text {
        position: absolute;
        right: 20rpx;
        bottom: 10rpx;
        color: red;
        padding: 4rpx;
        font-size: 30rpx;
        text-align: center;
        border: 4rpx solid red;
        // 旋转
        transform: rotate(-30deg);
        .jieshou {
          font-size: 40rpx;
        }
      }
      .list-item-line {
        display: flex;
        justify-content: space-between;
        line-height: 50rpx;
        color: #777;

        .left-auto {
          flex: 1;
          display: flex;
          // 靠左对齐
          justify-content: flex-start;
          // 换行
          flex-wrap: wrap;
        }
        .batch-item {
          border: 1rpx solid #d9ecff;
          color: #409eff;
          background: #ecf5ff;
          padding: 0 20rpx;
          margin-right: 10rpx;
          display: flex;
          // 水平居中
          align-items: center;

          .del-icon {
            margin-left: 10rpx;
            color: red !important;
          }
        }
      }
      .right {
        justify-content: flex-end;
        text {
          margin-left: 40rpx;
          color: #409eff;
        }
      }
    }
  }

  .bottom-btn {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80rpx;
    overflow: hidden;
    display: flex;
    .btn {
      flex: 1;
      text-align: center;
      line-height: 80rpx;
      background: #f0f0f0;
    }
    .confirm-btn {
      color: #fff;
      background: #409eff;
    }
  }
  .loading,
  .no-more-data {
    text-align: center;
    line-height: 80rpx;
    color: #999;
  }

  .popup-content {
    background: #fff;
    width: 500rpx;
    border-radius: 10rpx;
    padding: 10rpx 20rpx;
    .popup-title {
      font-size: 24rpx;
      line-height: 60rpx;
    }
    .uni-input {
      width: 260rpx;
      padding-left: 20rpx;
      border: 1rpx solid #eee;
    }
    .split-btn {
      margin-top: 20rpx;
      display: flex;
      justify-content: space-between;
      line-height: 80rpx;
      text-align: center;
      .btn {
        flex: 1;
        background: #f0f0f0;
        font-size: 24rpx;
      }
      .confirm-btn {
        color: #fff;
        background: #409eff;
      }
    }
  }
  .container-item {
    font-size: 12px;
    margin-bottom: 10rpx;
    background: #fff;
    border-radius: 14rpx;
    padding: 10rpx 20rpx;
    box-sizing: border-box;
    position: relative;

    .list-item-line {
      display: flex;
      justify-content: space-between;
      line-height: 50rpx;
      color: #777;
    }

    .material {
      border: 1rpx solid #d9ecff;
      color: #409eff;
      background: #ecf5ff;
      padding: 0 10rpx;
      box-sizing: border-box;
      border-radius: 5rpx;
      font-size: 20rpx;
    }
  }
  .container-code {
    text-align: center;
    line-height: 70rpx;
  }
  .container-btn {
    margin-top: 20rpx;
    display: flex;
    justify-content: space-between;
    line-height: 80rpx;
    text-align: center;
    .btn {
      flex: 1;
      background: #f0f0f0;
      font-size: 24rpx;
    }
    .confirm-btn {
      color: #fff;
      background: #409eff;
    }
  }
}
</style>
